<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土壤墒情监测系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 添加Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-light">
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <div class="container-fluid">
            <!-- 系统标志和名称 -->
            <a class="navbar-brand d-flex align-items-center" href="#">
                <i class="fas fa-leaf me-2"></i>
                土壤墒情监测系统
            </a>
            <!-- 导航折叠按钮 -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 主导航菜单 -->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" data-page="realtime">
                            <i class="fas fa-chart-line me-1"></i>实时监测
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-page="history">
                            <i class="fas fa-history me-1"></i>历史数据
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-page="profile">
                            <i class="fas fa-layer-group me-1"></i>土壤状态
                        </a>
                    </li>
                    <li class="nav-item">

                        <a class="nav-link" href="#" data-page="settings">
                            <i class="fas fa-cog me-1"></i>系统配置
                        </a>
                    </li>
                </ul>
                <!-- 右侧信息区 -->
                <div class="navbar-nav ms-auto">
                    <div class="nav-time">
                        <i class="fas fa-clock me-2"></i>
                        <span id="currentTime"></span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div id="content" class="content">
        <!-- 添加固定的警告通知区域 -->
        <div id="warningContainer" class="warning-container">
            <div class="warning-header">
                <i class="fas fa-bell me-2"></i>
                监测警告
                <span id="warningCount" class="warning-count">0</span>
            </div>
            <div id="warningList" class="warning-list"></div>
        </div>
        
        <div class="container-fluid">
            <!-- 页面标题和工具栏 -->
            <div class="content-header mb-4">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="page-title mb-0" id="pageTitle">实时监测</h4>
                    <div class="page-tools">
                        <div class="btn-group">
                            <button class="btn btn-outline-primary" id="exportData">
                                <i class="fas fa-download me-1"></i>导出数据
                            </button>
                            <button class="btn btn-outline-primary" id="refreshData">
                                <i class="fas fa-sync-alt me-1"></i>刷新
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 实时监测页面 -->
            <div class="page-content" id="realtimePage">
                <!-- 添加深度选择器 -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="depth-selector">
                            <label class="me-2">选择深度:</label>
                            <div class="btn-group" role="group" id="depthSelector">
                                <button type="button" class="btn btn-outline-primary active" data-depth="10">10cm</button>
                                <button type="button" class="btn btn-outline-primary" data-depth="20">20cm</button>
                                <button type="button" class="btn btn-outline-primary" data-depth="30">30cm</button>
                                <button type="button" class="btn btn-outline-primary" data-depth="50">50cm</button>
                                <button type="button" class="btn btn-outline-primary" data-depth="100">100cm</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 添加概览数据卡片行 -->
                <div class="row mb-4">
                    <div class="col">
                        <div class="stats-card">
                            <i class="fas fa-seedling"></i>
                            <h3>土壤墒情</h3>
                            <div class="value-container">
                                <p class="value" id="moisture-card-value">--</p>
                                <span class="unit">%</span>
                            </div>
                            <div class="trend-indicator" id="moisture-card-trend"></div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="stats-card">
                            <i class="fas fa-tint"></i>
                            <h3>水势</h3>
                            <div class="value-container">
                                <p class="value" id="water-potential-card-value">--</p>
                                <span class="unit">kPa</span>
                            </div>
                            <div class="trend-indicator" id="water-potential-card-trend"></div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="stats-card">
                            <i class="fas fa-thermometer-half"></i>
                            <h3>温度</h3>
                            <div class="value-container">
                                <p class="value" id="temperature-card-value">--</p>
                                <span class="unit">°C</span>
                            </div>
                            <div class="trend-indicator" id="temperature-card-trend"></div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="stats-card">
                            <i class="fas fa-cloud"></i>
                            <h3>湿度</h3>
                            <div class="value-container">
                                <p class="value" id="humidity-card-value">--</p>
                                <span class="unit">%</span>
                            </div>
                            <div class="trend-indicator" id="humidity-card-trend"></div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="stats-card">
                            <i class="fas fa-bolt"></i>
                            <h3>电导率</h3>
                            <div class="value-container">
                                <p class="value" id="conductivity-card-value">--</p>
                                <span class="unit">μS/cm</span>
                            </div>
                            <div class="trend-indicator" id="conductivity-card-trend"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- 实时数据监测面板 -->
                    <div class="col-md-8">
                        <div class="card shadow-sm">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <span><i class="fas fa-chart-line me-2"></i>监测数据</span>
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-outline-primary active" data-chart="realtime" id="realtimeBtn">
                                        <i class="fas fa-clock me-1"></i>实时
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary" data-chart="24h" id="24hBtn">
                                        <i class="fas fa-chart-line me-1"></i>24h
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary" data-chart="profile" id="profileBtn">
                                        <i class="fas fa-layer-group me-1"></i>剖面
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="chartContainer" class="chart-container">
                                    <div class="chart-view active" id="realTimeView">
                                        <canvas id="realTimeChart"></canvas>
                                    </div>
                                    <div class="chart-view" id="dayView">
                                        <canvas id="dayChart"></canvas>
                                    </div>
                                    <div class="chart-view" id="profileView">
                                        <canvas id="profileChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 添加采集配置面板 -->
                    <div class="col-md-4">
                        <div class="card shadow-sm mb-4">
                            <div class="card-header">
                                <i class="fas fa-cog me-2"></i>采集配置
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label">采样间隔</label>
                                    <select class="form-select" id="samplingRate">
                                        <option value="1000" selected>1秒</option>
                                        <option value="5000">5秒</option>
                                        <option value="10000">10秒</option>
                                        <option value="30000">30秒</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">数据存储时长</label>
                                    <select class="form-select" id="dataRetention">
                                        <option value="30">30分钟</option>
                                        <option value="60">1小时</option>
                                        <option value="360">6小时</option>
                                        <option value="720">12小时</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- 数据概览面板 -->
                        <div class="card shadow-sm">
                            <div class="card-header">
                                <i class="fas fa-list-alt me-2"></i>详细数据
                            </div>
                            <div class="card-body">
                                <div id="dataOverview" class="detailed-data"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 历史数据页面 -->
            <div class="page-content" id="historyPage" style="display: none;">
                <div class="row">
                    <div class="col-12">
                        <div class="card shadow-sm mb-4">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">历史数据查询</h5>
                                    <div class="query-tools">
                                        <div class="btn-group">
                                            <button class="btn btn-outline-secondary active" data-period="day">日</button>
                                            <button class="btn btn-outline-secondary" data-period="week">周</button>
                                            <button class="btn btn-outline-secondary" data-period="month">月</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="query-form mb-4">
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <input type="date" class="form-control" id="startDate">
                                        </div>
                                        <div class="col-md-3">
                                            <input type="date" class="form-control" id="endDate">
                                        </div>
                                        <div class="col-md-3">
                                            <select class="form-select" id="dataType">
                                                <option value="all">所有指标</option>
                                                <option value="moisture">土壤墒情</option>
                                                <option value="water">水势</option>
                                                <option value="temperature">温度</option>
                                                <option value="humidity">湿度</option>
                                                <option value="conductivity">电导率</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <button class="btn btn-primary w-100" onclick="queryHistoryData()">查询</button>
                                        </div>
                                    </div>
                                </div>
                                <!-- 查询结果概览 -->
                                <div class="card shadow-sm mb-4" id="queryResultOverview" style="display: none;">
                                    <div class="card-header">
                                        <h5 class="mb-0">查询结果概览</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-3">
                                            <div class="col-md-3">
                                                <div class="overview-card">
                                                    <div class="overview-icon">
                                                        <i class="fas fa-database"></i>
                                                    </div>
                                                    <div class="overview-info">
                                                        <div class="overview-label">数据点数</div>
                                                        <div class="overview-value" id="dataPointCount">0</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="overview-card">
                                                    <div class="overview-icon">
                                                        <i class="fas fa-clock"></i>
                                                    </div>
                                                    <div class="overview-info">
                                                        <div class="overview-label">采样间隔</div>
                                                        <div class="overview-value" id="samplingInterval">--</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="overview-card">
                                                    <div class="overview-icon warning">
                                                        <i class="fas fa-exclamation-triangle"></i>
                                                    </div>
                                                    <div class="overview-info">
                                                        <div class="overview-label">异常数据</div>
                                                        <div class="overview-value" id="abnormalCount">0</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="overview-card">
                                                    <div class="overview-icon">
                                                        <i class="fas fa-check-circle"></i>
                                                    </div>
                                                    <div class="overview-info">
                                                        <div class="overview-label">数据完整率</div>
                                                        <div class="overview-value" id="dataIntegrity">100%</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 数据统计信息 -->
                                        <div class="data-statistics mt-4">
                                            <h6 class="statistics-title mb-3">数据统计</h6>
                                            <div class="table-responsive">
                                                <table class="table table-hover">
                                                    <thead>
                                                        <tr>
                                                            <th>参数</th>
                                                            <th>最小值</th>
                                                            <th>最大值</th>
                                                            <th>平均值</th>
                                                            <th>标准差</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="statisticsTable">
                                                        <!-- 统计数据将通过JS动态生成 -->
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 图表展示区域 -->
                                <div class="card shadow-sm mb-4">
                                    
                                    <div class="card-body">
                                        <div id="historyChart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 土壤剖面页面 -->
            <div class="page-content" id="profilePage" style="display: none;">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card shadow-sm mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">深层监测数据</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover soil-data-table">
                                        <thead>
                                            <tr>
                                                <th>深度(cm)</th>
                                                <th>墒情(%)</th>
                                                <th>水势(kPa)</th>
                                                <th>温度(°C)</th>
                                                <th>状态</th>
                                            </tr>
                                        </thead>
                                        <tbody id="soilDataTable">
                                            <!-- 数据行将通过JS动态生成 -->
                                        </tbody>
                                    </table>
                                </div>
                                <div class="data-analysis mt-4">
                                    <h6 class="analysis-title mb-3">数据分析</h6>
                                    <div class="analysis-item">
                                        <div class="analysis-label">
                                            <i class="fas fa-chart-line me-2"></i>
                                            垂直分布特征
                                        </div>
                                        <div class="analysis-value moisture-distribution"></div>
                                    </div>
                                    <div class="analysis-item">
                                        <div class="analysis-label">
                                            <i class="fas fa-water me-2"></i>
                                            水分运移状况
                                        </div>
                                        <div class="analysis-value infiltration-status"></div>
                                    </div>
                                    <div class="analysis-item">
                                        <div class="analysis-label">
                                            <i class="fas fa-arrow-trend-up me-2"></i>
                                            变化趋势
                                        </div>
                                        <div class="analysis-value moisture-trend"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card shadow-sm">
                            <div class="card-header">
                                <h5 class="mb-0">土壤状态评估</h5>
                            </div>
                            <div class="card-body">
                                <div id="soilStatusAnalysis" class="soil-status">
                                    <div class="status-summary mb-4">
                                        <div class="row g-3">
                                            <div class="col-md-4">
                                                <div class="status-metric">
                                                    <div class="metric-icon">
                                                        <i class="fas fa-tint"></i>
                                                    </div>
                                                    <div class="metric-label">平均墒情</div>
                                                    <div class="metric-value avg-moisture">--</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="status-metric">
                                                    <div class="metric-icon">
                                                        <i class="fas fa-balance-scale"></i>
                                                    </div>
                                                    <div class="metric-label">水分均匀度</div>
                                                    <div class="metric-value moisture-uniformity">--</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="status-metric">
                                                    <div class="metric-icon">
                                                        <i class="fas fa-chart-line"></i>
                                                    </div>
                                                    <div class="metric-label">水分趋势</div>
                                                    <div class="metric-value moisture-trend-value">--</div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                               
                                            </div>
                                        </div>
                                    </div>
                                    <div class="status-item">
                                        <div class="status-header">
                                            <span class="status-indicator"></span>
                                            <span class="status-title">整体评估</span>
                                        </div>
                                        <div class="status-content">
                                            <div class="status-value"></div>
                                            <div class="status-description"></div>
                                        </div>
                                    </div>
                                    <div class="recommendations mt-3">
                                        <div class="recommendations-header">
                                            <i class="fas fa-lightbulb me-2"></i>
                                            <h6 class="mb-0">优化建议</h6>
                                        </div>
                                        <ul class="recommendation-list">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统配置页面 -->
            <div class="page-content" id="settingsPage" style="display: none;">
                <!-- 添加传感器模态框 -->
                <div class="modal fade" id="sensorModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="sensorModalTitle">添加传感器</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <form id="sensorForm">
                                    <input type="hidden" id="sensorId">
                                    <div class="mb-3">
                                        <label class="form-label">传感器名称</label>
                                        <input type="text" class="form-control" id="sensorName" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">安装深度 (cm)</label>
                                        <select class="form-select" id="sensorDepth" required>
                                            <option value="10">10cm</option>
                                            <option value="20">20cm</option>
                                            <option value="30">30cm</option>
                                            <option value="50">50cm</option>
                                            <option value="100">100cm</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">传感器类型</label>
                                        <select class="form-select" id="sensorType" required>
                                            <option value="TDR">TDR</option>
                                            <option value="FDR">FDR</option>
                                            <option value="Tensiometer">张力计</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">安装位置</label>
                                        <input type="text" class="form-control" id="sensorLocation" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">安装日期</label>
                                        <input type="date" class="form-control" id="sensorInstallDate" required>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" id="saveSensorBtn">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <!-- 传感器配置 -->
                    <div class="col-md-6 mb-4">
                        <div class="card shadow-sm">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">传感器配置</h5>
                                <button class="btn btn-sm btn-outline-primary" id="addSensorBtn">
                                    <i class="fas fa-plus me-1"></i>添加传感器
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="sensor-filters mb-3">
                                    <div class="row g-2">
                                        <div class="col-auto">
                                            <select class="form-select form-select-sm" id="sensorStatusFilter">
                                                <option value="all">全部状态</option>
                                                <option value="active">在线</option>
                                                <option value="inactive">离线</option>
                                            </select>
                                        </div>
                                        <div class="col">
                                            <input type="text" class="form-control form-control-sm" id="sensorSearch" placeholder="搜索传感器...">
                                        </div>
                                    </div>
                                </div>
                                <div class="sensor-list" id="sensorList">
                                    <div class="sensor-stats mb-3">
                                        <div class="row g-2">
                                            <div class="col-4">
                                                <div class="stat-card">
                                                    <div class="stat-value" id="totalSensors">0</div>
                                                    <div class="stat-label">总数量</div>
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="stat-card">
                                                    <div class="stat-value text-success" id="activeSensors">0</div>
                                                    <div class="stat-label">在线</div>
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="stat-card">
                                                    <div class="stat-value text-danger" id="inactiveSensors">0</div>
                                                    <div class="stat-label">离线</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sensor-items" id="sensorItems">
                                        <!-- 传感器列表项将通过JS动态生成 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 阈值设置 -->
                    <div class="col-md-6 mb-4">
                        <div class="card shadow-sm">
                            <div class="card-header">
                                <h5 class="mb-0">监测阈值设置</h5>
                            </div>
                            <div class="card-body">
                                <form id="thresholdForm">
                                    <div class="threshold-group mb-4">
                                        <label class="threshold-label">土壤墒情 (%)</label>
                                        <div class="threshold-inputs">
                                            <div class="input-group">
                                                <span class="input-group-text">下限</span>
                                                <input type="number" class="form-control" name="moisture_min" value="35">
                                                <span class="input-group-text">上限</span>
                                                <input type="number" class="form-control" name="moisture_max" value="65">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="threshold-group mb-4">
                                        <label class="threshold-label">水势 (kPa)</label>
                                        <div class="threshold-inputs">
                                            <div class="input-group">
                                                <span class="input-group-text">下限</span>
                                                <input type="number" class="form-control" name="water_potential_min" value="-50">
                                                <span class="input-group-text">上限</span>
                                                <input type="number" class="form-control" name="water_potential_max" value="0">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="threshold-group mb-4">
                                        <label class="threshold-label">温度 (°C)</label>
                                        <div class="threshold-inputs">
                                            <div class="input-group">
                                                <span class="input-group-text">下限</span>
                                                <input type="number" class="form-control" name="temperature_min" value="18">
                                                <span class="input-group-text">上限</span>
                                                <input type="number" class="form-control" name="temperature_max" value="28">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100">保存阈值设置</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="js/main.js"></script>
</body>
</html> 